<template>
  <view>
    <view class="top_bg"></view>
    <view class="top">
      <view class="top_button">
        <view class="return" @click="returnPage">
          <image :src="imageBaseUrl + '/img/return.png'"></image>
        </view>
        <view class="line"></view>
        <view class="homepage" @click="goHome">
          <image :src="imageBaseUrl + '/img/home.png'"></image>
        </view>
      </view>
      <view>订单详情</view>
    </view>
    <view class="status">已完成</view>
    <view class="OrderContent_box">
      <view class="Amount_due">
        <view class="Amount_font">应付金额</view>
        <view class="Amount_money">￥{{ data.total_price }}</view>
      </view>
      <view class="orderline"></view>
      <view class="synopsis">
        <view class="fare">
          <view class="fare_left">{{ data.name }}</view>
          <view class="fare_right">{{ data.number }}x￥{{ data.total_price / data.number }}</view>
        </view>
        <view class="use_time">
          <text>使用日期&nbsp;&nbsp;</text>
          <text>2024-09-24至2024-09-30</text>
        </view>
        <view class="includes">
          <text>单价包含&nbsp;&nbsp;</text>
          <text class="duce">{{ data.name }}</text>
        </view>
        <view class="duceline"></view>
      </view>
      <view class="information">
        <text class="info">信息</text>
        <view class="information_content">
          <div class='Name'>
            <div>游玩人</div>
            <span>{{ info.nickname }}</span>
          </div>
          <div class='ipone'>{{ info.tel }}</div>
          <div class='proof'>身份证号 4107822*******193X</div>
        </view>
      </view>
      <view class="duceline"></view>
      <view class="code">
        <text>订单编号</text>
        <view class="codes">
          {{ data.order_code }}
          <span style="color: #0078D4;margin-left: 10px;" @click="copyOrderCode">复制</span>
        </view>
      </view>
      <view class="trading_box">
        <text>交易时间</text>
        <view class="trading">{{ data.create_time }}</view>
      </view>
      <view class="duceline"></view>
      <view class="Refundrules_box">
        <text class="Cancellation">退改规则</text>
        <view class="Money_back">随时退</view>
        <view class="no_font">未使用可随时申请全额退款</view>
        <view class="Money_back">过期退</view>
        <view class="no_font">使用后1天经核实未使用系统将自动发起退款申请</view>
        <view class="no_font">下单后不支持修改如期</view>
      </view>
      <view class="duceline"></view>
      <view class="Supplier_phone">
        <view class="Supplierphone_left">
          <text>供应商电话</text>
          <view>催出票/协商退改</view>
        </view>
        <image :src="imageBaseUrl + '/img/tel.png'" mode="widthFix" @click="handleCall"></image>
      </view>
    </view>
    <view class="del_anew">
      <view class="del_indent" @click="openModal">删除订单</view>
      <view class="anew_indent" @click="goDetails">重新购买</view>
    </view>

    <uv-modal ref="modalRef" title="" content="是否确定删除该订单？" showCancelButton="true" @confirm="confirm" />
  </view>

</template>
<script setup>
import { ref, onMounted } from 'vue'
import api from '../../api/ticket/index.js'
import config from '../../config/index.js';
const imageBaseUrl = config.image;//图片地址
const data = ref('')//订单信息
const info = ref('')//用户信息
const modalRef = ref(null);//弹窗
const lists = ref({})//标签数据
// 返回
const returnPage = () => {
  uni.navigateBack({
    delta: 1
  });
}
//复制
const copyOrderCode = () => {
  const orderCode = data.value.order_code
  if (orderCode) {
    uni.setClipboardData({
      data: orderCode,
      success: () => {
        uni.showToast({
          title: '订单号已复制',
          icon: 'none',
          duration: 1500
        })
      }
    })
  }
}
//拨打电话
const handleCall = () => {
  // 调用uniapp拨打电话API
  uni.makePhoneCall({
    phoneNumber: '123456123456', // 电话号码
    success: () => {
      console.log('调用电话成功');
    },
    fail: (err) => {
      console.error('调用电话失败:', err);
      uni.showToast({
        title: '拨打电话失败，请检查网络或权限',
        icon: 'none'
      });
    }
  });
};
// 打开弹窗
const openModal = () => {
  modalRef.value?.open();
};
// 确认按钮的回调
const confirm = () => {
  console.log('点击确认按钮');
  deleteOrder()
};
//再次购买
const goDetails = () => {
    lists.value  = data.value;
    lists.value.id = data.value.ticketing_id;
    lists.value.current_price = data.value.total_price / data.value.number;
    uni.setStorageSync('target', lists.value);
    console.log(lists.value);
    uni.navigateTo({
        url: '/pages/submit/submit'
    });
}
//删除订单
const deleteOrder = () => {
  console.log(data.value);
  api.deleteOrder({
    id: data.value.id
  }).then(res => {
    console.log(res);
    if (res.code == 1) {
      uni.showToast({
        title: '删除成功',
        icon: 'success'
      });

      uni.redirectTo({
        url: '/pages/indent/indent'
      });
      api.Indent({
        user_id: uni.getStorageSync('token').id
      }).then(res => {
        console.log(res);
        data.value = res.data;
      })
    }
  })
}
// 主页
const goHome = () => {
  uni.navigateTo({
    url: '/pages/home/home'
  })
}
onMounted(() => {
  // 订单信息
  data.value = uni.getStorageSync('QR_code');//获取订单信息
  info.value = uni.getStorageSync('token');
  console.log(data.value)
  console.log(uni.getStorageSync('token'))
})
</script>
<style>
.line {
  width: 1%;
  background-color: #8a8a8a;
  height: 70%;
  margin-top: 5%;
}

.return {
  width: 49.5%;
  height: 100%;
  text-align: center;
  line-height: 25px;
}

.return image {
  width: 20px;
  margin-top: 2px;
  height: 20px;
}

.homepage {
  width: 49.5%;
  height: 100%;
  text-align: center;
  line-height: 25px;
}

.homepage image {
  width: 18px;
  margin-top: 3px;
  height: 18px;
}

.top_button {
  width: 70px;
  height: 25px;
  display: flex;
  border-radius: 15px;
  /* margin-top: 30px; */
  margin-left: 20px;
  margin-right: 20%;
  border: 1px solid rgb(192, 192, 192);
}

.header {
  width: 100%;
  position: sticky;
  top: 80px;
}

.top {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid rgb(203, 203, 203);
  background-color: rgb(255, 255, 255);
  position: sticky;
  top: 30px;
  color: #8a8a8a;
  display: flex;
  align-items: center;
}

.top_bg {
  background-color: rgb(255, 255, 255);
  width: 100%;
  height: 30px;
  position: sticky;
  top: 0;
}

.homeBox {
  width: 18%;
  height: 30px;
  margin-left: 12px;
  margin-top: 10px;
  border-radius: 29px;
  display: flex;
  align-items: center;
  border: 1px solid lightgray;
}

.back {
  width: 50%;
  height: 22px;
  border-right: ridge;
}

.back image {
  width: 63%;
  height: 20px;
  margin-left: 5px;
  margin-top: 2px;
}

.home {
  width: 50%;
  height: 22px;
}

.home image {
  width: 61%;
  height: 24px;
  margin-left: 6px;
  margin-top: -1px;
}

.top text {
  color: #505050;
  margin-left: 89px;
  margin-top: 15px;
}

.status {
  width: 100%;
  box-sizing: border-box;
  height: 79px;
  font-weight: 800;
  font-size: 20px;
  padding-top: 24px;
  padding-left: 16px;
}

.OrderContent_box {
  width: 92%;
  background-color: white;
  margin-left: 4%;
  border-radius: 5px;
}

.Amount_due {
  width: 100%;
  height: 50px;
  display: flex;
}

.Amount_font {
  width: 70%;
  box-sizing: border-box;
  font-size: 18px;
  padding-top: 10px;
  padding-left: 6px;
  height: 50px;
  font-weight: 600;
}

.Amount_money {
  width: 30%;
  box-sizing: border-box;
  height: 50px;
  color: rgba(255, 91, 121, 1);
  margin-right: 10px;
  font-weight: bold;
  font-size: 20px;
  padding-top: 9px;
  padding-left: 18px;
}

.orderline {
  width: 84%;
  height: 1px;
  background-color: #ebebeb;
  margin-left: 5%;
}

.duceline {
  width: 93%;
  height: 1px;
  margin-top: 10px;
  background-color: #ebebeb;
  margin-left: 1%;
}

.synopsis {
  width: 100%;
  height: 120px;
  margin-top: 8px;
}

.fare {
  width: 100%;
  margin-top: 11px;
  height: 29px;
  display: flex;
}

.fare_left {
  font-size: 18px;
  font-weight: 600;
  margin-left: 5px;
  color: #505050;
  width: 78%;
  height: 29px;
}

.fare_right {
  width: 22%;
  display: flex;
  height: 29px;
  justify-content: space-evenly;
}

.fare_right text {
  color: #505050;
  margin-top: 2px;
}

.fare_right span {
  font-weight: 600;
  font-size: 18px;
}

.use_time {
  width: 79%;
  display: flex;
  height: 29px;
  margin-top: 6px;
  justify-content: space-evenly;
}

.use_time text {
  font-size: 15px;
  line-height: 1.8;
  color: #505050;
}

.includes {
  width: 75%;
  display: flex;
  height: 29px;
  margin-top: 6px;
  justify-content: space-evenly;
}

.includes text {
  font-size: 15px;
  line-height: 1.8;
  margin-left: 1px;
  color: #505050;
}

.information {
  width: 98%;
  height: 115px;
  margin-top: 7px;
}

.info {
  font-size: 19px;
  margin-left: 7px;
  font-weight: 700;
}

.information_content {
  width: 88%;
  margin-top: 9px;
  height: 83px;
  margin-left: 6px;
}

.Name {
  width: 36%;
  height: 30px;
  display: flex;
  color: #505050;
  justify-content: space-around;
}

.ipone {
  margin-left: 66px;
  color: #505050;
}

.proof {
  margin-left: 66px;
  color: #505050;
  margin-top: 5px;
}

.code {
  width: 100%;
  height: 30px;
  display: flex;
  margin-top: 19px;
}

.code text {
  margin-left: 8px;
  font-size: 15px;
  color: #505050;
}

.codes {
  width: 50%;
  height: 30px;
  margin-left: 20px;
}

.trading {
  width: 50%;
  height: 30px;
  margin-left: 20px;
}

.trading_box {
  width: 100%;
  height: 30px;
  display: flex;
}

.trading_box text {
  margin-left: 8px;
  font-size: 15px;
  color: #505050;
}

.Refundrules_box {
  width: 100%;
  margin-top: 12px;
  height: 170px;
}

.Cancellation {
  font-size: 19px;
  margin-left: 7px;
  font-weight: 800;
}

.Money_back {
  width: 13%;
  margin-top: 8px;
  text-align: center;
  margin-left: 7px;
  font-size: 14px;
  height: 22px;
  border-radius: 3px;
  color: rgba(42, 130, 228, 1);
  border: rgba(42, 130, 228, 1) 1px solid;
  line-height: 1.6;
}

.no_font {
  margin-left: 7px;
  margin-top: 4px;
  color: #505050;
}

.Supplier_phone {
  width: 100%;
  height: 70px;
  display: flex;
  margin-top: 13px;
}

.Supplierphone_left {
  width: 70%;
  height: 70px;
}

.Supplierphone_left text {
  font-weight: 600;
  font-size: 19px;
  margin-left: 7px;
}

.Supplierphone_left view {
  margin-left: 7px;
  margin-top: 12px;
  color: #505050;
}

.Supplier_phone image {
  width: 45px;
  height: 43px;
  margin-left: 37px;
  margin-top: 11px;
}

.del_anew {
  display: flex;
  width: 100%;
  position: sticky;
  height: 55px;
  background-color: white;
  bottom: 0;
  justify-content: space-around;
  align-items: center;
}

.del_indent {
  width: 24%;
  height: 35px;
  text-align: center;
  border-radius: 16px;
  color: #505050;
  border: 1px solid lightgray;
  display: flex;
  align-items: center;
  justify-content: center;
}

.anew_indent {
  width: 30%;
  height: 37px;
  border-radius: 26px;
  background-color: #ffc300;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.curtain {
  width: 100vw;
  height: 100vh;
  position: fixed;
  opacity: 0.2;
  background-color: black;
  top: 0;
}

.alert {
  width: 70%;
  height: 153px;
  background-color: rgba(255, 255, 255, 1);
  margin-left: 14%;
  position: fixed;
  border-radius: 9px;
  top: 250px;
  z-index: 1;
  /* display: none; */
}

.alert text {
  color: #505050;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  margin-top: 7px;
}

.prompt {
  font-size: 18px;
  color: #505050;
  margin-left: 29%;
  margin-top: 5%;
}

.login_option {
  margin-top: 10%;
  width: 100%;
  height: 53px;
  border-top: lightgrey solid 1px;
  display: flex;
}

.cancel_box {
  width: 50%;
  height: 40px;
  text-align: center;
  font-size: 20px;
  color: rgba(136, 136, 136, 1);
  font-weight: 600;
  padding-top: 10px;
  border-right: inset;
}

.ok_box {
  width: 50%;
  height: 40px;
  text-align: center;
  font-size: 20px;
  color: rgba(39, 136, 221, 1);
  font-weight: 600;
  padding-top: 10px;
}
</style>